<template>
  <div>
    <div class="box"></div>
    <div class="navigationBar">
      <!-- logo图标、搜索框、链接跳转 -->

      <div class="header">
        <div class="search_Info">
          <!-- logo图标 -->
          <div class="logo_icon">
            <!-- <el-image :src="logo"></el-image> -->
            <span>logo</span>
          </div>
          <!-- 搜索框 -->
          <div class="searchInput">
            <el-input
              v-model="input"
              placeholder="请输入您需要搜索的产品名称 | 品牌 | 型号"
              class="search"
              clearable
            ></el-input>
            <el-button style="background-color:#F03A58" type="primary" icon="el-icon-search">搜索</el-button>
          </div>
          <!-- 文字链接 -->
          <div class="navText">
            <el-link href v-for="(value, index) in navList" :key="index" class="test">{{ value }}</el-link>
          </div>
        </div>
      </div>
      <!-- 首页、品牌中心、积分商城 -->
      <div class="nav">
        <div class="navContent">
          <!-- 全部商品分类 -->
          <div class="commodity">
            <div class="commodity_center" @click="classifyShow">
              <!-- 分类图标 -->
              <div class="feiLeiIcon">
                <img src="../assets/image/1_0_icon_fenlei.png" alt />
              </div>
              <span class="commodity_title">全部商品分类</span>
            </div>
          </div>
          <!-- 首页、品牌中心、积分商城... -->
          <div class="homePage_Option">
            <ul class="option-list">
              <li
                v-for="(item, i) in optionList"
                :key="i"
                :class="currentIndex == i ? 'line' : ''"
                @click="switchover(i)"
              >
                <span v-if="i != 6">{{ item }}</span>
                <span v-else>{{ item }}({{ purchase }})</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 全部分类hover选择框 -->
      <div class="classifyList" v-show="flag">
        <!-- 分类选项 -->
        <div class="classifyOPtion">
          <div
            class="classifyOption_center"
            v-for="(item, index) in classifyList"
            :key="index"
            :class="classifyindex == index ? 'bgcolor' : ''"
            @click="selectOPtion(index)"
          >
            <!-- 标签图标 -->
            <div class="labelIcon">
              <img :src="classifyindex == index ? blackIcon : whiteIcon" alt />
            </div>
            <p>{{ item }}</p>
          </div>
        </div>
        <!-- 全部分类展示框 -->
        <div class="classifyShow">
          <div class="exhibitionlist" v-for="(msg, index) in exhibitionlist" :key="index">
            <!-- 分类选项标题 -->
            <div class="exhibition_title">
              <p>{{ msg.title }}</p>
            </div>
            <!-- 分类选项类别选项 -->
            <div class="exhibition_option">
              <p v-for="(item, i) in msg.select" :key="i">{{ item }}</p>
            </div>
          </div>
        </div>
        <!-- 品牌名称 -->
        <div class="brand">
          <div class="brand-option" v-for="(item, index) in brandList" :key="index"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="">
import Vue from "vue";
// import aa from '../views/goodsDetail.vue'
export default Vue.extend({
  name: "navigationBar",
  components: {
    // aa
  },
  data() {
    return {
      //logo:'', //logo图标
      input: "", //搜索框
      navList: [
        "登录",
        "|",
        "注册",
        "|",
        "会员认证",
        "|",
        "账号管理",
        "|",
        "帮助中心",
        "|",
        "联系客服"
      ], //文字超链接
      optionList: [
        "首页",
        "品牌中心",
        "优选商品",
        "视频中心",
        "特惠商品",
        "积分商城",
        "购物车",
        "个人中心"
      ], //首页、品牌中心...导航切换
      purchase: "12", //购物车数量
      currentIndex: 0, //当前下划线索引
      classifyList: [
        "商品品类A",
        "商品品类B",
        "商品品类C",
        "商品品类D",
        "商品品类E",
        "商品品类F",
        "商品品类G"
      ], //分类选择项
      classifyindex: 0, //当前所选全部分类的选项
      whiteIcon: require("../assets/image/1_0_icon_biaoqian_u.png"), //当前白色小标签
      blackIcon: require("../assets/image/1_0_icon_biaoqian_s.png"), //选中黑色小标签
      exhibitionlist: [
        {
          title: "分类A-01",
          select: [
            "商品001",
            "尚品002",
            "尚品003",
            "尚品004",
            "尚品005",
            "商品006",
            "商品007",
            "商品008",
            "商品009"
          ]
        }
      ], //全部分类展示框
      brandList: ["", "", "", "", "", "", "", "", "", "", "", ""], //品牌选项列表
      flag: false //全部分类hover选择框隐藏
    };
  },
  methods: {
    //   点击每个首页、品牌中心等选项进行切换
    switchover(i) {
      this.currentIndex = i;
      sessionStorage.setItem("head_nav", i);
      if (this.currentIndex === 0) {
        this.$router.push({ path: "/" });
      } else if (this.currentIndex === 1) {
        this.$router.push({ path: "/brandcenter" });
      } else if (this.currentIndex === 5) {
        this.$router.push({ path: "/integralmall" });
      } else if (this.currentIndex === 6) {
        this.$router.push({ path: "/shopcart" });
      } else if (this.currentIndex === 7) {
        this.$router.push({ path: "/personalCenter" });
      }
    },
    // 点击全部分类选项
    selectOPtion(i) {
      this.classifyindex = i;
    },
    // 点击全部分类 选择框显示
    classifyShow() {
      this.flag = !this.flag;
    }
  },
  created() {
    if (sessionStorage.getItem("head_nav") != null) {
      this.currentIndex = sessionStorage.getItem("head_nav");
    }
  }
});
</script>
<style lang="scss" scoped>

// logo图标、搜索框、链接跳转
.box {
  height: 124px;
  top: 0;
}
.navigationBar {
  width: 100%;
  position: fixed;
  background-color: white;
  height: 132px;
  z-index: 20000;
  top: 0;
  left: 0;
}
::v-deep .el-input--suffix .el-input__inner {
  padding-right: 30px;
  outline: none;
  border: none;
}
::v-deep .el-button--primary {
  color: #fff;
  border: none;
}
.header {
  // width: 100%;
  .search_Info {
    max-width: 1200px;
    min-width: 1020px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    // logo图标
    .logo_icon {
      width: 170px;
      height: 60px;
      background: #e6e6e6;
      color: #949494;
      margin: 10px 0;
      font-size: 28px;
      text-align: center;
      line-height: 60px;
    }
    //搜索框
    .searchInput {
      width: 440px;
      height: 40px;
      margin: 20px 0;
      display: flex;
      outline: none;
      border-radius: 6px;
      border: 1px solid #f03a58 !important;
      //input 边框颜色
      >>> .el-input__inner {
        background-color: blue;
        border: none;
        outline: none;
      }
    }

    //文字链接
    .navText {
      margin: 30px 0;
      .test {
        margin: 0 3px;
      }
    }
  }
}
// 首页、品牌中心、积分商城
.nav {
  width: 100%;
  height: 50px;
  background: #f03a58;
  .navContent {
    width: 1200px;

    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    // 全部商品分类
    .commodity {
      width: 220px;
      height: 100%;
      background: #e0203f;
      display: flex;
      .commodity_center {
        width: 80%;
        height: 100%;
        margin: 0 auto;
        display: flex;
        cursor: pointer;
        // 全部分类小图片
        .feiLeiIcon {
          width: 22px;
          height: 18px;
          margin: 16px 0;
        }
        //    全部分类文字
        .commodity_title {
          line-height: 50px;
          color: #ffff;
          margin-left: 15px !important;
        }
      }
    }
    // 首页、品牌中心、积分商城...
    .homePage_Option {
      width: 55%;
      height: 100%;
      .option-list {
        width: 100%;
        height: 95%;
        list-style: none;
        display: flex;
        justify-content: space-around;
        margin: 0;
        padding: 0;
        line-height: 50px;
        & li {
          color: #fff;
          cursor: pointer;
        }
      }
    }
  }
}
// 全部分类hover列表
.classifyList {
  max-width: 1200px;
  min-width: 1020px;
  height: 510px;
  margin: 0 auto;
  display: flex;
  position: relative;
  z-index: 999;


  // 分类选项
  .classifyOPtion {
    width: 220px;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 0 6px;
    box-sizing: border-box;
    //  选项居中显示
    .classifyOption_center {
      width: 100%;
      height: 40px;
      padding: 0 20px;
      display: flex;
      box-sizing: border-box;
      align-items: center;
      margin-top: 4px;
      font-size: 15px;
      letter-spacing: 1px;
      cursor: pointer;
      // 标签图标
      .labelIcon {
        width: 15px;
        height: 15px;
        margin: 5px 15px 0 0;
      }
    }
  }
  //选项显示框
  .classifyShow {
    width: 700px;
    height: 100%;
    background-color: white !important;
    // 每一个小选项
    .exhibitionlist {
      width: 100%;
      padding: 10px 15px;
      display: flex;
      font-size: 14px;

      // 小选项标题
      .exhibition_title {
        width: 100px;
        color: #f03a58;
        cursor: default;
      }
      .exhibition_option {
        width: 88%;
        display: flex;
        flex-wrap: wrap;
        p {
          margin: 0 10px !important;
          &:hover {
            color: #409eff;
            cursor: pointer;
          }
        }
      }
    }
  }
  // 品牌名称
  .brand {
    width: 280px;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    overflow: auto;
    background-color: white !important;
    // 品牌选项
    .brand-option {
      width: 92px;
      height: 60px;
      border: 1px solid black;
      margin: 10px 0 4px 0;
    }
  }
}
img {
  width: 100%;
  height: 100%;
}
// 选项下标线
.line {
  border-bottom: 2px solid #fff;
}
// 全部分类选中后的背景颜色，字体
.bgcolor {
  color: #000;
  background: white;
}
</style>
